
<script>
export default {
    data() {
        return {
            images: [
                "../products/lunbo1.jpg",
              "../products/lunbo2.jpg",
              "../products/lunbo3.jpg",            ],
            hdgd:"400px",
        }
    },
    mounted() {
        let that = this;
        window.onresize = function windowResize() {
          // 通过捕获系统的onresize事件触发我们需要执行的事件
          var w = window.innerWidth
          var h = 270
          if (w > 1180) {
            h = 400
          } else {
            h = 0.22 * w
          }
          that.hdgd = h + 'px'
          console.log(that.hdgd)
        }
      }
}
</script>
<template>
    <div class="block" m="t-4">
        <el-carousel trigger="click" :height="hdgd" >
            <el-carousel-item v-for="item in images" :key="item" >
                    <el-image  class="image" :src="item" fit="" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<style scoped>
.image{
    /* width: 400px; */
}
.el-carousel__container {
  height: auto;
}
.block {

  box-sizing: border-box;
  vertical-align: top;
}
.block:last-child {
  border-right: none;
}
.demonstration {
display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}


</style>
